<%--
  Created by IntelliJ IDEA.
  User: 86191
  Date: 2022/11/26
  Time: 16:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>
        老师注册界面
    </title>
    <style>

        #box1 {
            height: 500px;
            width: 400px;
            margin: 60px auto;
            border: 1px solid red;
            border-radius: 20px;
        }

        #box2 {
            margin: 20px auto;
            border-bottom: 1px solid red;
            width: 300px;
            height: 50px;
        }

        #u_name {
            height: 50px;
            width: 220px;
            /*去掉边框*/
            outline: none;
            border: 0px;
        }

        #box3 {
            margin: 20px auto;
            border-bottom: 1px solid red;
            width: 300px;
            height: 50px;
        }

        #u_pwd {
            height: 50px;
            width: 190px;
            border: 0px;
            /*去掉边框*/
            outline: none;
        }

        #box3s {
            margin: 20px auto;
            border-bottom: 1px solid red;
            width: 300px;
            height: 50px;
        }

        #u_pwds {
            height: 50px;
            width: 190px;
            border: 0px;
            /*去掉边框*/
            outline: none;
        }

        #box4 {
            margin: 20px auto;
            border-bottom: 1px solid red;
            width: 300px;
            height: 50px;
        }

        #u_sex {
            height: 50px;
            width: 190px;
            border: 0px;
            /*去掉边框*/
            outline: none;
        }

        #but {
            height: 40px;
            width: 300px;
            margin-left: 50px;
            text-align: center;
            line-height: 40px;
            background-color: red;
        }

        #box5 {
            width: 300px;
            height: 30px;
            font-size: 20px;
            margin-top: 20px;
            margin-left: 50px;
            color: red;
        }
    </style>
</head>
<body>
<div id="box1">
    <form action="TeacherLogin" method="post">
        <div id="box2">
            账户：<input name="name" type="text" id="u_name">
        </div>
        <div id="box3">
            密码：<input name="pwd" type="password" id="u_pwd">
            <span id="look">显示</span>
        </div>
        <div id="box3s">
            密码：<input name="pwd_s" type="password" id="u_pwds">
            <span id="looks">显示</span>
        </div>
        <div id="box4">
            性别：<input name="sex" type="text" id="u_sex" value="1为男 0为女">
        </div>
        <button id="but">下一步</button>
        <br>
        <div id="box5">
            ${requestScope.ts}
        </div>
    </form>
</div>
<script>
    /**
     *  1、在密码框里放一些按钮能查看密码
     *  2、判断输入的账户和密码是否为空
     *     如果不一致给用户提示： 你输入的账户为空和你输入的密码为空 让用户重新输入、并return
     *  3、判断两次输入的密码是否一致
     *     如果两次输入的密码不一致给用户提示：你输入的密码不一样、请你重新输入、并return
     */

    //定义一个函数 判断字符串是否为空
    function isEmpty(str) {
        if (str == null || str.trim() == "") {
            return true;
        }
        return false;
    }

    let u_name = document.getElementById("u_name");
    let u_pwd = document.getElementById("u_pwd");
    let u_pwds = document.getElementById("u_pwds");
    let look = document.getElementById("look");
    let looks = document.getElementById("looks");
    let ts = document.getElementById("box5");
    let xyb = document.getElementById("but");

    //点击查看密码
    //如果fang等于1 显示密码 0不显示
    let fang = 1;
    look.onclick = function () {
        if (fang == 1) {
            u_pwd.type = "text";
            look.innerHTML = "不显示";
            fang = 0;
        } else {
            u_pwd.type = "password";
            look.innerHTML = "显示";
            fang = 1;
        }
    }
    looks.onclick = function () {
        if (fang == 1) {
            u_pwds.type = "text";
            looks.innerHTML = "不显示";
            fang = 0;
        } else {
            u_pwds.type = "password";
            looks.innerHTML = "显示";
            fang = 1;
        }
    }

    //判断账户和密码是否为空、并返回提示信息
    xyb.onclick = function () {
        if (isEmpty(u_name.value)) {
            ts.innerHTML = "账户不能为空";
            return false;
        }
        if (isEmpty(u_pwd.value)) {
            ts.innerHTML = "密码不能为空";
            return false;
        }
        if (isEmpty(u_pwds.value)){
            ts.innerHTML = "密码不能为空";
            return false;
        }
        if (u_pwd.value!=u_pwds.value){
            ts.innerHTML = "密码不一致";
            return false;
        }
    }
</script>
</body>
</html>
